<!--
 * @Author: Bobby
 * @Date: 2021-12-30 10:01:42
 * @LastEditTime: 2022-02-15 17:58:43
 * @LastEditors: Bobby
 * @Description:
 * @FilePath: \wms-v2\src\ve\elements\layout\uiFlexbox\uiFlexbox.vue
 * CIMC-V2
-->
<template>
  <div
    :id="hasPreview ? info._id : `diy_${info._id}`"
    v-ui-ref="vSetRef"
    class="ui-flexbox gantt-box w-full"
    :class="[
      'p-' + info.extension.padding.value,
      'mt-' + (info.extension.topMargin && info.extension.topMargin.value),
      'mr-' + (info.extension.rightMargin && info.extension.rightMargin.value),
      'mb-' + (info.extension.bottomMargin && info.extension.bottomMargin.value),
      'ml-' + (info.extension.leftMargin && info.extension.leftMargin.value),
    ]"
  >
    <div
      v-for="(item, index) in list"
      :key="index"
      class="flex items-center"
      :style="{
        height: info.extension.height.value + 'px',
        marginBottom: info.extension.spanceBetween.value + 'px',
      }"
    >
      <div
        class="gant_date"
        :style="{
          margin: '0 20px',
          fontSize: info.extension.fontSize.value + 'px',
        }"
      >
        {{ item.Date }}
      </div>
      <div
        class="gant_progress w-full h-full"
        :style="{
          background: info.extension.backgroundColor.value,
        }"
      >
        <div class="progress w-full h-full flex" @mouseleave="showPop2 = false">
          <div
            v-for="(cur, i) in item.List"
            :key="i"
            style="height: 100%"
            :style="getStyle(cur, item.Date)"
            @mouseleave="mouseLeave()"
            @mousemove="mouseOver($event, item, cur, index, i)"
          ></div>
        </div>
        <div class="slide w-full h-full flex">
          <div
            v-for="(cur, i) in getSlide()"
            :key="i"
            class="h-full"
            :style="{
              flex: 1,
              fontSize: info.extension.fontSize2.value + 'px',
            }"
          >
            <span style="position: absolute; right: -20px; top: 7px">{{ getTime(cur) }}</span>
            <span v-if="i == 0" style="position: absolute; left: -25px; top: 7px">{{ infoComponent.extension.startTime.value }}</span>
          </div>
        </div>
      </div>
      <div class="gant_table h-full flex">
        <div v-for="(vv, ii) in infoComponent?.extension?.statusList?.value || []" :key="ii">
          <div class="flex items-center justify-center" style="width: 60px; border-bottom: 1px solid #999; border-right: 1px solid #999">
            {{ vv.name }}
          </div>
          <div class="flex items-center justify-center" style="width: 60px; border-right: 1px solid #999">
            {{ item['Total'] && item['Total'][vv.statusValue] }}
          </div>
        </div>
      </div>
    </div>
    <div ref="popBox" class="ui_gantt_box_pop" :style="popStyle" @mouseleave="showPop2 = false" @mouseover="showPop2 = true">
      <div class="flex">
        <ul>
          <li>
            <span class="left_title">{{ translateTitle('Ve.layout.开始时间') }} :</span>
            <span class="right_cont">{{ infoForm?.StartDateStr }}</span>
          </li>
          <li>
            <span class="left_title">{{ translateTitle('Ve.layout.结束时间') }} :</span>
            <span class="right_cont">{{ infoForm?.EndDateStr }}</span>
          </li>
          <li>
            <span class="left_title">{{ translateTitle('Ve.layout.状态') }} :</span>
            <span class="right_cont">{{ infoForm?.Status }}</span>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>
<script>
  import { defineComponent } from 'vue'
  import { UiMixin, RefsInjectMixin, ChartMixin } from '@ve/mixin'
  import cloneDeep from 'lodash/cloneDeep'
  import { translateTitle } from '@/utils/i18n'
  export default defineComponent({
    name: 'UiGantt',
    mixins: [UiMixin, RefsInjectMixin, ChartMixin],
    inject: {
      hasPreview: { default: false },
    },
    props: {
      info: {
        required: true,
        type: Object,
        default: function () {
          return {}
        },
      },
    },
    data() {
      return {
        infoComponent: {},
        inter: null,
        showPop: false,
        showPop2: false,
        popStyle: {},
        infoForm: {},
        timer: 0,
        overIndex: -1,
        text: '',
        // list: [],
        list: [],
      }
    },
    computed: {},
    watch: {
      info: {
        handler() {
          this.$nextTick(() => {
            this.infoComponent = cloneDeep(this.info)
            this.getRequestData()
            this.inter && (clearInterval(this.inter), (this.inter = null))
            if (this.info.extension.requestSet.value.loopRequest) {
              this.inter = setInterval(() => {
                this.getRequestData()
              }, this.info.extension.requestSet.value.loopTime)
            }
          })
        },
        deep: true,
      },
      showPop(val) {
        if (!val && !this.showPop2) {
          document.getElementsByTagName('body')[0].removeChild(this.$refs.popBox)
          this.infoForm = {}
        }
      },
      // getSelectModule: {
      //   handler(val, oldVal) {
      //     if (!oldVal.extension) {
      //       if (pieOption[this.info.chartTypeValue]) {
      //         this.getSelectModule.extension && this.getSelectModule.extension.series && (this.getSelectModule.extension.series.isShowBtn = false)
      //       } else {
      //         this.getSelectModule.extension && this.getSelectModule.extension.series && (this.getSelectModule.extension.series.isShowBtn = true)
      //       }
      //     }
      //   },
      //   deep: true,
      // },
    },
    created() {
      this.infoComponent = cloneDeep(this.info)
    },
    mounted() {
      if (!this.info.extension.firstGetData?.value) {
        return
      }
      this.$nextTick(() => {
        this.getRequestData()
        if (this.info.extension.requestSet.value.loopRequest) {
          this.inter = setInterval(() => {
            this.getRequestData()
          }, this.info.extension.requestSet.value.loopTime)
        } else {
          this.inter && (clearInterval(this.inter), (this.inter = null))
        }
      })
    },
    deactivated() {
      console.warn('退出----------------------')
      this.inter && clearInterval(this.inter)
    },
    beforeUnmount() {
      this.inter && clearInterval(this.inter)
    },
    methods: {
      translateTitle,
      mouseOver(event, item, cur, i) {
        if (this.infoForm.StartDate != cur.StartDate) {
          document.getElementsByTagName('body')[0].appendChild(this.$refs.popBox)
          this.overIndex = i
          this.infoForm = cur
          this.popStyle.opacity = 1
          this.popStyle.transition = 'all .1s'
          this.popStyle.boxShadow = `0 0 5px 2px ${
            (this.info.extension.statusList.value.find((q) => cur[this.info.extension.statusProps.value] == q.statusValue) || {}).statusColor
          } inset`
          this.showPop = true
        }
        //console.log(event.target, event.clientY, item)
        if (Date.now() - this.timer > 50) {
          ;(this.popStyle.left = event.clientX + 6 + 'px'), (this.popStyle.top = event.clientY + 6 + 'px'), (this.timer = Date.now())
        }
        // app.mount('#' + this.hasPreview ? this.info._id : `diy_${this.info._id}`)
      },
      mouseLeave() {
        this.showPop = false
        // this.showPop2 = false
      },
      getValue(Status, item) {
        let obj = {}
        if (Status == 'off') {
          return
        } else {
          obj = item.list.find((cur) => cur.Status == Status)
        }
        let total =
          new Date(item.Date + ' ' + this.infoComponent.extension.endTime.value) -
          new Date(item.Date + ' ' + this.infoComponent.extension.startTime.value)
        let num = ((obj.EndDate - obj.StartDate) / total) * 100
        return Number(num.toFixed(0))
      },
      getTime(num) {
        let arr = this.infoComponent.extension.startTime.value.split(':').map(Number)
        let ehour = num * Number(this.infoComponent.extension.spanceDate.value) + arr[0]
        let emini = arr[1]
        return `${ehour > 9 ? ehour : '0' + ehour}:${emini > 9 ? emini : '0' + emini}`
      },
      getSlide() {
        // if 3600000 spanceDate - total % spanceDate
        let num = 0
        let spanceDate = Number(this.infoComponent.extension.spanceDate.value) * 3600000
        let total =
          new Date('2022/10/19 ' + this.infoComponent.extension.endTime.value) -
          new Date('2022/10/19 ' + this.infoComponent.extension.startTime.value)
        //当不整除间隙时做末尾数据补全，必须的步骤，不然要报错
        if (total % spanceDate) {
          num = Math.floor(total / spanceDate) + 1
          //离整除的时间差的秒数
          let chazhi = spanceDate - (total % spanceDate)
          //分钟
          let mini = chazhi / 60000
          //需要补全的小时
          let ceilHours = Math.floor(mini / 60)
          //需要补全的分钟
          let ceilMini = mini % 60
          // //console.log(ceilHours, ceilMini)
          let arr = this.infoComponent.extension.endTime.value.split(':').map(Number)
          let ehour = ceilHours + arr[0]
          let emini = ceilMini + arr[1]
          if (ceilMini + arr[1] >= 60) {
            ehour = ehour + 1
            emini = emini - 60
          }
          this.infoComponent.extension.endTime.value = `${ehour > 9 ? ehour : '0' + ehour}:${emini > 9 ? emini : '0' + emini}`
        } else {
          num = total / spanceDate
        }
        //console.log(num, total, spanceDate, this.infoComponent.extension.endTime.value, this.infoComponent.extension.startTime.value)
        return num
      },
      getStyle(item, date) {
        let total =
          new Date(date + ' ' + this.infoComponent.extension.endTime.value) - new Date(date + ' ' + this.infoComponent.extension.startTime.value)
        return {
          width: ((item.EndDate - item.StartDate) / total) * 100 + '%',
          left: ((item.StartDate - new Date(date + ' ' + this.infoComponent.extension.startTime.value).getTime()) / total) * 100 + '%',
          background: (this.info.extension.statusList.value.find((cur) => item[this.info.extension.statusProps.value] == cur.statusValue) || {})
            .statusColor,
        }
      },
      getRequestData() {
        // this.statusGetList = this.infoComponent.extension.statusList.value.map(item => {
        //   let obj = {}
        //   obj.name = item.name
        //   this.list.map(cur => {
        //     cur.list.map(que => {
        //       if(item.status )
        //     })
        //   })
        // })
        // this.list.map((cur) => {
        //   cur.list.map((que) => {
        //     let obj = this.infoComponent.extension.statusList.value.find((item) => item.statusValue == que.status)
        //     que.num = this.getValue(que.status, cur)
        //     que.name = obj.name
        //   })
        //   return cur
        // })
        // //console.log(this.list, 'this.list')
        this.$request(this.infoComponent.extension.requestSet.value, (res) => {
          this.list = cloneDeep(res)
        })
      },
    },
  })
</script>
<style lang="scss">
  .uiGantt {
    width: 100%;
    height: 85%;
    overflow-y: auto;
    padding-bottom: 40px;
    .gant_date {
      font-size: 16px;
    }
    .gant_progress {
      flex: 1;
      font-size: 20px;
    }
    .gant_table {
      margin: 5px 20px;
      font-size: 16px;
      border: 1px solid #9999;
      & > div {
        height: 100%;
        div {
          height: 50%;
        }
      }
    }
    .slide > div {
      height: 10px;
      position: relative;
      border-top: 2px solid #999;
      margin-top: 2px;
      &::before {
        content: '';
        display: inline-block;
        width: 3px;
        height: 10px;
        position: absolute;
        left: -1px;
        background: #999;
      }
      &:last-child {
        &::after {
          content: '';
          display: inline-block;
          width: 3px;
          height: 10px;
          position: absolute;
          right: -1px;
          background: #999;
        }
      }
    }
    .progress {
      position: relative;
      overflow: hidden;
    }
    .progress > div {
      position: absolute;
      height: 100%;
      top: 0;
    }
  }
  .ui_gantt_box_pop {
    padding: 10px 20px;
    box-shadow: 0 0 5px 2px #000 inset;
    display: inline-block;
    border-radius: 10px;
    position: fixed;
    background: #fff;
    // border: 1px solid #fff;
    transition: 'all .1s';
    word-break: break-all;
    top: 0;
    left: 0;
    z-index: 99999;
    opacity: 0;
  }
</style>
